import { useContext, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Input } from './components/input';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import { useNavigation } from '@react-navigation/native';
import { px2dp } from '../../utils/pixel-adapter';
import { MyButton } from '../../components/button';
import { getTheme } from '../../theme';
import { AuthContext } from '../../context/auth';

export function Login() {
    const insets = useSafeAreaInsets();
    const statusBarHeight = getStatusBarHeight();
    const [userName, setUserName] = useState('');
    const [password, setPassword] = useState('');
    const navigation = useNavigation();
    const { setAuth } = useContext(AuthContext);

    function onLoginPress() {
        // navigation.navigate('homeTabs', {  screen: 'home' });
        setAuth(true);
    }

    return (
        <View style={[styles.container, { paddingTop: statusBarHeight, paddingBottom: insets.bottom }]}>
            <View style={styles.content_box}>
                <View style={styles.logo_box}>
                    <Text style={[styles.logo_text, { fontFamily: 'iconfont' }]}>{'\ue600'}</Text>
                </View>
                <View style={styles.welcome_box}>
                    <Text style={styles.welcome_back}>欢迎回来</Text>
                    <Text style={styles.welcome_tip}>登录之后继续享受你的音乐之旅</Text>
                </View>
                <View style={styles.input_box}>
                    <Input value={userName} onChangeText={setUserName} placeholder="请输入用户名" />
                    <Input value={password} onChangeText={setPassword} placeholder="请输入密码" secureTextEntry={true} />
                    <MyButton onPress={onLoginPress} style={styles.login_btn}>
                        登录
                    </MyButton>
                </View>
                <View style={styles.forget_box}>
                    <Text onPress={() => console.log('忘记密码')} style={styles.forget_txt}>忘记密码？</Text>
                </View>
            </View>
        </View>
    );
}

const theme = getTheme();

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.mainColor,
    },
    content_box: {
        marginTop: px2dp(150),
        alignItems: 'center',
    },
    logo_box: {
        backgroundColor: theme.subcolor,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: px2dp(16),
        width: px2dp(64),
        height: px2dp(64),
    },
    logo_text: {
        color: 'black',
        fontSize: 36,
    },
    welcome_box: {
        marginTop: px2dp(16),
        alignItems: 'center',
    },
    welcome_back: {
        fontSize: 20,
        color: 'white',
        fontWeight: 'bold',
    },
    welcome_tip: {
        fontSize: 14,
        color: 'rgb(170, 170, 170)',
        marginTop: px2dp(8),
    },
    input_box: {
        marginTop: px2dp(20),
        width: px2dp(375),
        paddingLeft: px2dp(16),
        paddingRight: px2dp(16),
    },
    login_btn: {
        justifyContent: 'center',
        backgroundColor: theme.subcolor,
        color: 'black',
        height: px2dp(56),
        fontSize: 16,
        marginTop: px2dp(16),
    },
    forget_box: {
        marginTop: px2dp(16),
        alignItems: 'center',
    },
    forget_txt: {
        color: theme.subcolor,
        fontSize: 14,
    },
});